<template>
  <div class="safetyButtonAdd">
    <el-button type="primary" size="small" @click="dialogFormVisibleAdd = true">上传备案车辆</el-button>
    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="上传备案车辆" :visible.sync="dialogFormVisibleAdd"
           @open="getRecordList"    @opened="$store.commit('dialogTop')" @close="resetForm('ruleFormAdd')">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="备案企业" prop="enterpriseNo" :rules="{required: true, message: '备案企业不能为空', }">
          <el-select v-model="ruleFormAdd.enterpriseNo"  @change="getRecordList" size="small"  placeholder="备案企业">
            <el-option
              v-for="item in $store.state.companyInfos"
              :key="item.enterpriseNo+''"
              :label="item.enterpriseName"
              :value="item.enterpriseNo+''">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备案类型" prop="registerType"  :rules="[{ 'required':true, 'message': '请选择备案类型', 'trigger': 'blur'}]">
          <el-radio v-model="ruleFormAdd.registerType" :label="0">投放</el-radio>
          <el-radio v-model="ruleFormAdd.registerType" :label="1">回收</el-radio>
        </el-form-item>
        <el-form-item label="备案指标" v-show="ruleFormAdd.registerType==0" prop="batchNo" :rules="{required: ruleFormAdd.registerType==0, message: '备案指标不能为空', }">
          <el-select v-model="ruleFormAdd.batchNo" size="small" clearable placeholder="备案指标">
            <el-option
              v-for="item in options"
              :key="item.batchNo"
              :label="item.batchNo"
              :value="item.batchNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备案批次" prop="registerNo" :rules="{required: true, message: '备案批次不能为空', }">
          <el-input size="small" v-model="ruleFormAdd.registerNo" auto-complete="off" placeholder="备案批次"></el-input>
        </el-form-item>

        <el-form-item label="上传文件">
          <div class="uploadRackOne">
            <el-upload :limit="1"
                       class="upload-demo"
                       ref="uploadfile"
                       :action="uploadUrl"
                       :auto-upload="false"
                       :on-change="getFileList"
                       :on-remove="getFileList"
                       :file-list="fileList"
                       :before-upload="newFiles"
                       accept=".xlsx,.xls"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上传表格文件</div>
            </el-upload>
            <div class="clickDownload">
              <el-button size="small" plain @click="downLoadXml()">点击下载模板文件</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item></el-form-item>
      </el-form>
      <div style="text-align: center;margin-bottom: 9px;">
        <el-button type="primary" size="small" @click="submitForm('ruleFormAdd')">提 交</el-button>
        <el-button size="small" @click="dialogFormVisibleAdd = false">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>

  export default {
    props: [],
    data () {
      return {
        options: [{},],
        ruleFormAdd: {
          "enterpriseNo": "",
          "registerNo": "",
          "registerType": 0,
          "batchNo": "",
        },
        uploadUrl: "aaa",
        uploadForm: new FormData(),
        streetData: [],
        fileList: [],
        dialogFormVisibleAdd: false,
        rulesAdd: {}
      }
    },
    created(){

    },
    mounted(){
      if(this.$store.state.companyInfos.length>0){
        this.ruleFormAdd.enterpriseNo=this.$store.state.companyInfos[0].enterpriseNo
        this.getRecordList()
      }
    },
    methods: {
      getFileList(file, fileList){
        this.fileList=fileList
      },
      getRecordList(){
        this.ruleFormAdd.batchNo=""
        this.axios.post(process.env.API_HOST + `/vehicle/selectPutRecordList`, {enterpriseNo:this.ruleFormAdd.enterpriseNo})
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.options = result.result
            }
          })
      },
      newFiles (file) {
        const isLt2M = file.size / 1024 / 1024 < 500;
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 500MB!');
        } else {
          this.uploadForm.append('file', file)
          this.uploadForm.append('enterpriseNo', this.ruleFormAdd.enterpriseNo)
          this.uploadForm.append('registerNo', this.ruleFormAdd.registerNo)
          this.uploadForm.append('registerType', this.ruleFormAdd.registerType)
          this.uploadForm.append('batchNo', this.ruleFormAdd.batchNo)
          this.uploadForm.append('sign', this.makeSign({
            enterpriseNo: this.ruleFormAdd.enterpriseNo,
            registerNo: this.ruleFormAdd.registerNo,
            registerType: this.ruleFormAdd.registerType,
            batchNo: this.ruleFormAdd.batchNo,
          }))
          return false
        }

      },
      //下载模板
      downLoadXml(){
        let url2 = process.env.API_HOST + `/template/车辆数据上传模板.xlsx`
        window.location.href = url2
      },

      //提交
      newSubmitForm () {
        if (this.fileList.length == 0) {
          this.$message.error('请选取文件');
          return
        }
        this.axios({
          method: 'post',  // 方式一定是post
          url: process.env.API_HOST + `/vehicle/uploadRegisterVehicle`,
          timeout: 20000,
          data: this.uploadForm        // 参数需要是单一的formData形式
        }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: "上传成功"
            });
            this.uploadForm = new FormData()
            this.dialogFormVisibleAdd = false
            this.$emit('searchRowsInfo')
            this.resetForm('ruleFormAdd')
          } else {

            this.uploadForm = new FormData()
            this.dialogFormVisibleAdd = false
          }
        })
        this.$refs.uploadfile.submit()

      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.newSubmitForm()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.uploadForm = new FormData()
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .safetyButtonAdd
    display inline-block
    margin-left 10px
  .uploadRackOne, .clickDownload
    text-align center
    width 100%
    line-height 30px
  .uploadRackOne
    padding 10px 0
    border 1px dashed grey
    border-radius 10px
    width 100%
</style>
